<template>
  <div class="login">
    <div class="topBox">
      <h1>欢迎登录后台管理系统</h1>
      <div class="box">
        <el-form
          ref="form"
          :rules="rules"
          :model="form"
          status-icon
          label-width="80px"
        >
          <el-form-item label="用户名" prop="name">
            <el-input type="text" v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="form.password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('form')"
              >登录</el-button
            >
            <el-button @click="resetForm('form')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="greenBox"></div>
    <div class="redBox"></div>
  </div>
</template>

<script>
import Login from '@/api/loginAPI'
export default {
  data() {
    return {
      form: {},
      rules: {
        name: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
          {
            min: 3,
            max: 10,
            message: '长度在 3 到 10 个字符',
            trigger: 'blur',
          },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            pattern: /^[0-9A-Za-z]{6,15}$/,
            message: '密码必须由数字、字母两种字符组成，长度在6-15位之间',
            trigger: 'blur',
          },
        ],
      },
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // this.$http({
          //   method: 'post',
          //   url: '/login',
          //   data: this.form,
          // }).then((res) => {
          //   let { code, data, msg } = res.data
          //   if (code === 2000) {
          //     this.$message.success(msg)
          //     sessionStorage.setItem('token', data.token)
          //     this.$router.replace('/home')
          //   } else {
          //     this.$message.error(msg)
          //   }
          // })

          Login.login(this.form).then((res) => {
            let { code, data, msg } = res.data
            if (code === 2000) {
              this.$message.success(msg)
              // 1.将token存入sessionStorage
              // sessionStorage.setItem('token', data.token)
              this.$store.dispatch('set_token', data.token)
              this.$store.dispatch('set_btnPermission', data.resource)
              this.$store.dispatch('set_menu')
              this.$router.replace('/home')
            } else {
              this.$message.error(msg)
            }
          })
        } else {
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
  },
}
</script>

<style lang="less" scope>
body {
  background-color: rgb(48, 34, 48);
}
.login {
  position: relative;
  width: 500px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  text-align: center;
  margin: auto;
  margin-top: 200px;
  overflow: hidden;
  h1 {
    margin: 10px 0;
    color: #fff;
    text-shadow: 3px 3px 3px pink;
  }
  .box {
    width: 88%;
  }
  .el-form-item__label {
    color: #fff;
  }
  @keyframes exp {
    0% {
      transform: translate(250px, -124.9px) rotate(0deg);
    }
    100% {
      transform: translate(250px, -124.9px) rotate(360deg);
    }
  }

  .greenBox {
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgb(35, 34, 48);
    width: 496px;
    height: 245.8px;
    transform: translate(2px, 2px);
    z-index: -1;
  }
  .redBox {
    width: 350px;
    height: 100px;
    background-color: pink;
    position: absolute;
    transform-origin: 0 0;
    animation: exp 1.5s linear infinite;
    z-index: -2;
  }
  .el-button--primary {
    background-color: rgb(35, 34, 48);
    color: #fff;
    border-color: pink;
  }
  .el-button + .el-button {
    background-color: rgb(35, 34, 48);
    color: #fff;
    border-color: pink;
  }
  .el-input__inner {
    border-width: 2px;
    border-color: pink;
  }
}
</style>
